import { Line } from '@ant-design/plots';
import { useRequest } from '@umijs/max';
import React from 'react';
import { dateCount } from './service';


interface UserTrendStatisticsProps {
  height?: number
}

const UserTrendStatistics: React.FC<UserTrendStatisticsProps> = ({
  height
}) => {

   const {data} = useRequest(() => {
    return dateCount({})
  })

  const chartComStyle = {
    axis: {
      x: {
        labelFill: '#fff',
      },
      y: {
        labelFill: '#fff',
      },
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
        itemLabelFill: '#fff'
      },
      size: {},
    },
    height: height,
  }

  const config = {
    data,
    xField: 'date',
    yField: 'count',
    point: {
      shapeField: 'square',
      sizeField: 4,
    },
    interaction: {
      tooltip: {
        marker: false,
      },
    },
    style: {
      lineWidth: 2,
    },
    ...chartComStyle
  };
  return <Line {...config} />;
};

export default UserTrendStatistics
